<template>
  <el-row id="about">
    <Header />
    <el-col class="center">
      <Banner :infor="infor" />
      <div class="content">
        <div class="box">
          <div class="tab">
            <div
              :class="[act == index ? 'list act' : 'list']"
              v-for="(item, index) in tabList"
              :key="index"
              @click="tabChange(index)"
            >
              <div class="icon">
                <div class="wire"></div>
              </div>
              <div class="text">{{ item.chName }}<br />{{ item.enName }}</div>
            </div>
          </div>
          <div class="tabContent">
            <div class="cont">
              <div class="title">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="fir">关于华清园</div>
                <div class="sec">陪孩子终身学习</div>
              </div>
              <div class="tabContBox">
                <div class="tabCont tabCont1" v-show="act == 0">
                  <div class="left">
                    <p>
                      华清园教育创办于2001年，总部坐落于北京盘古大观。20年专注中小学及特色教育，-直秉持“诚信做教育，诚心为学员”的宗旨，集小学入学、初中入学、中高考辅导及咨询规划于-体，汇聚名校名师之力，以300余位全国知名科研院所、名校的“国宝级”师资力量及华清园教育自有骨干教研团队为基石，高起点办教育，面向社会各年龄段学生进行专业、高效的个性化学科及特长辅导，致力于培养学科成绩优异、兼具特长、素养全面的资优学生。
                    </p>
                    <br />
                    <p>
                      华清园教育在北京设有六大直营校区:黄庄校区、东直门校区、上地校区、公主坟校区、金源校区、中关村校区。同时旗下建有华清园在线、北京小升初网、北京幼升小网、北京中考在线、北京高考在线、自主招生在线等网络平台。华清园教育以提高教育质量和促进教育公平为己任，致力于在人工智能时代成为AI教育的践行者和创新者，利用人工智能和大数据技术辅助教学，为学生提供覆盖全龄段的学习生涯规划及全维度综合测评、高效高质的课堂内容，通过线上线下融合的教学模式针对性解决孩子的学习难题。
                    </p>
                  </div>
                  <div class="right">
                    <img
                      src="/static/images/about/list1.png"
                      alt=""
                      srcset=""
                    />
                  </div>
                </div>
                <div class="tabCont tabCont2" v-show="act == 1">
                  <div
                    class="fruit"
                    v-for="(item, index) in courseList"
                    :key="index"
                  >
                    <div class="year">{{ item.year }}</div>
                    <div class="event" v-html="item.event"></div>
                  </div>
                  <img src="/static/images/about/list2.png" class="bg" />
                </div>
                <div class="tabCont tabCont3" v-show="act == 2">
                  <img src="/static/images/about/list3.jpg" alt="" srcset="" />
                  <div class="list">
                    <div class="item">
                      <div class="key">企业口号</div>
                      <div class="val">
                        诚信是事业的根本，学习是成长的动力。
                      </div>
                    </div>
                    <div class="item">
                      <div class="key">企业愿景</div>
                      <div class="val">
                        成为备受信赖的教育培训机构。<br />为客户提供有针对性的整体解决方案,持续供应优质的课程产品和服务体验，让孩子省力，家长省心，赢得客户的信赖。
                      </div>
                    </div>
                    <div class="item">
                      <div class="key">企业使命</div>
                      <div class="val">
                        为社会创造价值，为客户创造价值，为团队创造价值，为员工创造价值,为自身创造价值。
                      </div>
                    </div>
                    <div class="item">
                      <div class="key">核心价值观</div>
                      <div class="val">
                        尊重客户、诚信务实、团队合作、创新变革、精进学习、敬业尽责
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tabCont tabCont4" v-show="act == 3">
                  <div
                    class="list"
                    v-for="(item, index) in superiorityList"
                    :key="index"
                  >
                    <div class="card">
                      <img
                        :src="
                          '/static/images/about/superiority' +
                          (index + 1) +
                          '.png'
                        "
                      />
                      <p>{{ item.card }}</p>
                    </div>
                    <div class="key">{{ item.key }}</div>
                    <div class="val">{{ item.val }}</div>
                  </div>
                </div>
                <div class="tabCont tabCont5" v-show="act == 4">
                  <div class="top">
                    华清园教育创办于2001年，以"诚信做教育，诚心为学员”的宗旨，拥有雄厚的师资力量及独特的办学优势，高起点办教育，面向社会各年龄段的学生进行专业、高效的个性化文化课和特长特色类辅导。为了更好的服务各年龄段学生，我们在北京有七个校区服务点，欢迎您的光临。
                  </div>
                  <div class="list">
                    <div
                      class="item"
                      v-for="(item, index) in setList"
                      :key="index"
                    >
                      <div class="text" >{{item.text}}</div>
                      <div class="phone" >报名电话：{{item.phone}}</div>
                      <div class="road">
                       校区地址： {{item.road}}
                      </div>
                    </div>
                  </div>
                  <div class="bottom">
                    温馨提示:如果您还有些其他疑问，欢迎致电各校区咨询电话或集团客服热线，我们将详细解答您的问题。
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-col>
    <FooterNav />
    <!-- <Sidebar /> -->
  </el-row>
</template>
<script>
import Header from '@/components/header'
import FooterNav from '@/components/footernav'
import Banner from '@/components/banner2'
// import Sidebar from '@/components/sidebar'
export default {
  // 页面名称
  name: 'about',
  // 接受父组件传值
  props: {},
  // 定义模板
  components: {
    Header,
    FooterNav,
    Banner,
    // Sidebar
  },
  // Data数据
  data() {
    return {
      infor: {
        url: '/static/images/about/banner1.png',
        height: '500px',
        type: 1
      },
      tabList: [
        {
          chName: '企业介绍',
          enName: 'INTRODUCE',
        },
        {
          chName: '发展历程',
          enName: 'HISTORY',
        },
        {
          chName: '企业文化',
          enName: 'CULTURE',
        },
        {
          chName: '办学优势',
          enName: 'ADVANTAGE',
        },
        {
          chName: '联系我们',
          enName: 'CONTACT US',
        },
      ],
      act: 0,
      courseList: [
        {
          year: '2001年',
          event: '华清园家教中心在清华大<br />学校园中成立',
        },
        {
          year: '2002年',
          event: '成立华清园辅导班',
        },
        {
          year: '2004年',
          event: '公司搬到清华科技园创业大厦',
        },
        {
          year: '2005年',
          event: '成立公主坟、劲松学习分中心',
        },
        {
          year: '2007年',
          event: '启动一对一辅导业务',
        },
        {
          year: '2008年',
          event: '总部搬到清华园科技大厦<br />成立自主招生部',
        },
        {
          year: '2010年',
          event: '成立国图分中心，东<br />直门分中心',
        },
        {
          year: '2012年',
          event:
            '分贝成立人大、朝阳门、三<br />元桥、世纪城、牡丹园、上<br />地6所新校区',
        },
        {
          year: '2013年',
          event: '正是收购海文部分业务，<br />糖果英语投入运营',
        },
        {
          year: '2014年',
          event: '收购山姆大叔少儿英语',
        },
        {
          year: '2015年',
          event: '成立华清园考试研究院，<br />开展联考项目',
        },
        {
          year: '2016年',
          event:
            '整合集团教育资源，K13课外辅导项目正式上线<br />组建研发团队，自主研发“逻辑数学”课程',
        },
        {
          year: '2017年',
          event:
            ' 荣获 北京晨报 2016京城保所特色校 京城领军中小学课外辅导机构<br />荣获网易教育“2017年度品牌影响力教育机构”大奖',
        },
        {
          year: '2018年',
          event:
            '荣获企业认证协会AAA信用企业<br />华清园教育集团总部迁址至北京盘古大观',
        },
        {
          year: '2019年',
          event:
            '收购志愿无忧，正式开启<br />覆盖全龄段全学段的学生<br />生涯学习规划服务项目',
        },
        {
          year: '2020年',
          event:
            'K13课外辅导品牌完成战略升级<br />华清园在线项目启动，全线启动线<br />上+线下融合的教学模式',
        },
      ],
      superiorityList: [
        {
          card: '品牌悠久',
          key: '丰富的办学经验，高品质的教学质量',
          val:
            '华清园教育于2001年正式成立，成立20年来一直与清华、 北大、人大附中、实验中学、中关村系列校等多所中小学及高校密切合作，积累了丰富的办学经验，取得了丰厚的教学成果，在业内享有极高的声誉。',
        },

        {
          card: '师资强劲',
          key: '顶级的师资团队，把握最新出题方向题',
          val:
            '业内知名院校专家组建的团队和华清园专兼职教师亲自执教。北京市高中示范校的年级组长、备课组长和学科带头人等一线特高级教师、 高考命题权威研究专家担纲教学顾问，所有教案均由专家组审核，保证授课效果。',
        },

        {
          card: '体系完整',
          key: '高标准的教学服务、精细化的教研',
          val:
            '专属班主任老师、专属授课老师、专属教学方案、专属心理老师,以小班形式实现- -对一精准教学的效果。',
        },

        {
          card: '专业性高',
          key: '专精的授课内容透析升学考重、难点',
          val:
            '剖析历年升学考命题规律，解读最新政策资讯，把握命题方向，注重短、平、快的提升,辅导方法及时奏效，为考生理清知识脉络，指导考生掌握应考策略、应考答题规则。',
        },

        {
          card: '服务贴心',
          key: '专业的心理辅导，帮助考生调整心态',
          val:
            '良好健康的心理状态对学生来说尤为重要。华清园教育持续关注学生学习状态，安排素质教育专家全程人盯人，确保学生以积极的心态应对高强度的学习压力,让学生潜质得到最大限度的释放。',
        },

        {
          card: '平台优势',
          key: '及时掌控第一手信息， 在线为您答疑解惑',
          val:
            '华清园教育官网、北京幼升小网、北京小升初网、北京中高考网等为学生及家长提供了各类升学信息和交流服务平台，家长可及时了解各类升学信息，周到的线上咨询服务即时为您解升学之忧。',
        },
      ],
      setList: [1, 2, 3, 4, 5, 6, 7],
      setList: [{
          text: '上地校区:',
          phone: '010-6296 9885',
          road: '北京市海淀区上地西路41号院宏达商务中心C座2层 '
      },
      {
          text: '黄庄校区:',
          phone: '010-5623 9682',
          road: '北京市海淀区知春路118号知春大厦15层 '
      },
      {
          text: '金源校区:',
          phone: '010-8886 5401',
          road: '海淀区蓝靛厂路25号汇博大厦A座二层（华清园教育）'
      },
      {
          text:'公主坟校区:',
          phone:'010-5365 9689',
          road:'北京市海淀区复兴路47号天行健大厦5层511室'
      },
      {
          text: '中关村校区（原西直门校区）:',
          phone: '010-5334 8242',
          road: '海淀区海淀南路34号艾瑟顿商业广场310 '
      },
      {
          text: '东直门校区:',
          phone: '010-5724 1971',
          road: '北京市东直门东方银座C座7层 '
      }
      ]
    }
  },
  // 侦听器
  watch: {},
  // 钩子函数
  mounted() {},
  // 方法
  methods: {
    tabChange(e) {
      this.act = e
    },
  },
}
</script>
<style lang="scss" scoped>
#about {
  min-width: 1200px;
  $textColor: #8d3996;
  $textColor1: #8b8b8b;
  $bgColor: #7f2189;
  .center {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: space-around;
    padding-bottom: 95px;
    .content {
      width: 1200px;
      height: 1200px;
      box-sizing: border-box;
      margin: 0 auto;
      padding: 69px 0;
      margin-bottom: 72px;
      .box {
        position: relative;
        width: 1200px;
        height: 100%;
        .tab {
          width: 190px;
          height: 740px;
          background: $bgColor;
          position: absolute;
          left: 0;
          top: 81px;
          z-index: 9;
          $actColor: #dcd50f;
          .list {
            height: 20%;
            box-sizing: border-box;
            border-bottom: 1px solid #5c0c65;
            text-align: center;
            cursor: pointer;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            align-content: space-around;
            &:nth-last-of-type(1) {
              border: 0;
            }
            &.act {
              .icon {
                .wire {
                  width: 40px;
                  background: $actColor;
                }
              }
              .text {
                color: $actColor;
              }
            }
            .icon {
              width: 40%;
              box-sizing: border-box;
              padding-left: 32px;
              .wire {
                width: 16px;
                height: 2px;
                background: white;
                // margin: 0 auto;
              }
            }
            .text {
              width: 60%;
              color: white;
              font-size: 13px;
              box-sizing: border-box;
              padding-right: 9px;
            }
          }
        }
        .tabContent {
          width: 100%;
          height: 100%;
          .cont {
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: center;
            .title {
              color: $textColor;
              position: relative;
              margin: 0 auto 54px;
              .dot {
                width: 9px;
                height: 9px;
                position: absolute;
                left: -13px;
                bottom: 0;
                &:nth-of-type(1) {
                  background: $textColor;
                  bottom: 27px;
                }
                &:nth-of-type(2) {
                  background: #b86dda;
                  bottom: 15px;
                }
                &:nth-of-type(3) {
                  background: #fff338;
                  bottom: 3px;
                }
              }
              .fir {
                font-size: 26px;
                font-weight: bold;
                color: $textColor;
              }
              .sec {
                font-size: 14px;
                font-weight: 400;
                color: $textColor1;
              }
            }
            .tabContBox {
              width: calc(100% - 190px);
              height: calc(100% - 108px);
              margin-left: 190px;
              // background: #ccc;
              .tabCont {
                width: 100%;
                height: 100%;
              }
              .tabCont1 {
                width: 100%;
                height: 100%;
                display: flex;
                flex-wrap: wrap;
                align-items: flex-start;
                justify-content: space-between;
                .left {
                  width: 550px;
                  height: 540px;
                  box-sizing: border-box;
                  margin-left: 36px;
                  margin-top: 78px;
                  padding: 40px 50px;
                  text-indent: 2em;
                  line-height: 32px;
                  font-size: 13px;
                  color: $bgColor;
                  background: #f4f4f4;
                }
                .right {
                  margin-top: 36px;
                }
              }
              .tabCont2 {
                position: relative;
                .bg {
                  position: absolute;
                  top: 0;
                  left: -160px;
                }
                .fruit {
                  width: 78px;
                  height: 78px;
                  color: $textColor1;
                  position: absolute;
                  z-index: 10;
                  .year {
                    width: 100%;
                    height: 100%;
                    font-size: 15px;
                    font-weight: bold;
                    line-height: 72px;
                    text-align: center;
                    box-sizing: border-box;
                    border: 7px solid;
                    border-radius: 50%;
                    box-shadow: inset 2px 2px 5px;
                    background: white;
                    position: relative;
                  }
                  .event {
                    font-size: 14px;
                    position: absolute;
                    left: -100px;
                  }
                  &:nth-of-type(1) {
                    left: 260px;
                    top: -30px;
                    .year {
                      border-color: #7f2189;
                    }
                    .event {
                      width: 416px;
                      top: 28px;
                      left: -160px;
                    }
                  }
                  &:nth-of-type(2) {
                    left: 510px;
                    top: 8px;
                    .year {
                      border-color: #9f0800;
                    }
                    .event {
                      width: 416px;
                      top: 28px;
                      left: 91px;
                    }
                  }
                  &:nth-of-type(3) {
                    left: 244px;
                    top: 84px;
                    .year {
                      border-color: #ff890b;
                    }
                    .event {
                      width: 416px;
                      top: 32px;
                      left: -190px;
                    }
                  }
                  &:nth-of-type(4) {
                    left: 488px;
                    top: 110px;
                    .year {
                      border-color: #b5216f;
                    }
                    .event {
                      width: 416px;
                      left: 83px;
                      top: 24px;
                    }
                  }
                  &:nth-of-type(5) {
                    left: 755px;
                    top: 186px;
                    .year {
                      border-color: #f7d900;
                    }
                    .event {
                      width: 416px;
                      left: 83px;
                      top: 28px;
                    }
                  }
                  &:nth-of-type(6) {
                    left: 176px;
                    top: 226px;
                    .year {
                      border-color: #8dbe15;
                    }
                    .event {
                      width: 416px;
                      top: -24px;
                      left: -97px;
                    }
                  }
                  &:nth-of-type(7) {
                    left: 98px;
                    top: 295px;
                    .year {
                      border-color: #2fb3be;
                    }
                    .event {
                      width: 416px;
                      top: 81px;
                      left: -58px;
                    }
                  }
                  &:nth-of-type(8) {
                    left: 180px;
                    top: 360px;
                    .year {
                      border-color: #c051ee;
                    }
                    .event {
                      width: 416px;
                      top: 96px;
                      left: -32px;
                    }
                  }
                  &:nth-of-type(9) {
                    left: 620px;
                    top: 280px;
                    .year {
                      border-color: #0033b5;
                    }
                    .event {
                      width: 416px;
                      top: 24px;
                      left: 90px;
                    }
                  }
                  &:nth-of-type(10) {
                    left: 696px;
                    top: 369px;
                    .year {
                      border-color: #9f0800;
                    }
                    .event {
                      width: 416px;
                      left: 83px;
                      top: 28px;
                    }
                  }
                  &:nth-of-type(11) {
                    left: 258px;
                    top: 554px;
                    .year {
                      border-color: #ff890b;
                    }
                    .event {
                      width: 416px;
                      top: 96px;
                      left: -68px;
                    }
                  }
                  &:nth-of-type(12) {
                    left: 480px;
                    top: 520px;
                    .year {
                      border-color: #b5216f;
                    }
                    .event {
                      width: 416px;
                      top: 24px;
                      left: 90px;
                    }
                  }
                  &:nth-of-type(13) {
                    left: 816px;
                    top: 705px;
                    .year {
                      border-color: #07a5b1;
                    }
                    .event {
                      width: 416px;
                      top: -28px;
                      left: -365px;
                    }
                  }
                  &:nth-of-type(14) {
                    left: 70px;
                    top: 743px;
                    .year {
                      border-color: #f7d900;
                    }
                    .event {
                      width: 416px;
                      top: -18px;
                      left: 77px;
                    }
                  }
                  &:nth-of-type(15) {
                    left: 216px;
                    top: 850px;
                    .year {
                      border-color: #8dbe15;
                    }
                    .event {
                      width: 416px;
                      top: 20px;
                      left: -166px;
                    }
                  }
                  &:nth-of-type(16) {
                    left: 500px;
                    top: 850px;
                    .year {
                      border-color: #580561;
                    }
                    .event {
                      width: 416px;
                      top: 10px;
                      left: 93px;
                    }
                  }
                }
              }
              .tabCont3 {
                .list {
                  margin-left: 72px;
                  .item {
                    margin-top: 49px;
                    .key {
                      color: $textColor;
                      font-weight: bold;
                      font-size: 18px;
                    }
                    .val {
                      color: $textColor1;
                      font-size: 13px;
                      line-height: 24px;
                      margin-top: 9px;
                    }
                  }
                }
              }
              .tabCont4 {
                .list {
                  height: 110px;
                  text-align: left;
                  box-sizing: border-box;
                  padding-left: 81px;
                  margin-bottom: 13px;
                  display: flex;
                  flex-wrap: wrap;
                  flex-direction: column;
                  align-items: center;
                  // justify-content: space-between;
                  align-content: space-between;
                  .card {
                    width: 123px;
                    height: 110px;
                    position: relative;
                    &:hover ~ .val{
                      display: block;
                    }
                    img {
                      width: 123px;
                      height: 110px;
                    }
                    p {
                      width: 100%;
                      font-weight: bold;
                      font-size: 17px;
                      line-height: 110px;
                      margin: 0;
                      text-align: center;
                      position: absolute;
                      left: 0;
                      top: 0;
                    }
                  }
                  .key {
                    width: calc(100% - 152px);
                    margin-top: 16px;
                    font-weight: bold;
                    font-size: 17px;
                    &:hover ~ .val{
                      display: block;
                    }
                  }
                  .val {
                    display: none;
                    width: calc(100% - 152px);
                    margin-top: 16px;
                    line-height: 24px;
                    font-size: 13px;
                    color: $textColor1;
                  }
                  &:nth-of-type(2n) {
                    padding-left: 181px;
                  }
                  &:nth-of-type(1) {
                    .card {
                      color: #b5216d;
                    }
                    .key {
                      color: #7e218b;
                    }
                  }
                  &:nth-of-type(2) {
                    .card {
                      color: #ae2512;
                    }
                    .key {
                      color: #ae2512;
                    }
                  }
                  &:nth-of-type(3) {
                    .card {
                      color: #b5216f;
                    }
                    .key {
                      color: #b62270;
                    }
                  }
                  &:nth-of-type(4) {
                    .card {
                      color: #252aa2;
                    }
                    .key {
                      color: #222aa6;
                    }
                  }
                  &:nth-of-type(5) {
                    .card {
                      color: #ae2512;
                    }
                    .key {
                      color: #c0620a;
                    }
                  }
                  &:nth-of-type(6) {
                    .card {
                      color: #cb0d3d;
                    }
                    .key {
                      color: #cc0c3b;
                    }
                  }
                }
              }
              .tabCont5 {
                box-sizing: border-box;
                padding-left: 39px;
                .top {
                  width: 900px;
                  // height: 130px;
                  line-height: 30px;
                  font-size: 14px;
                  color: white;
                  background: #df8900;
                  box-sizing: border-box;
                  padding: 30px 30px;
                }
                .list {
                  margin-top: 72px;
                  display: flex;
                  flex-wrap: wrap;
                  align-items: center;
                  padding-left: 21px;
                  justify-content: space-between;
                  .item {
                    width: 48%;
                    color: $textColor1;
                    font-size: 14px;
                    line-height: 24px;
                    margin-bottom: 32px;
                    // div{
                    //   margin-bottom: ;
                    // }
                  }
                }
                .bottom {
                  margin-top: 24px;
                  font-size: 14px;
                  color: $textColor;
                  padding-left: 20px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
